<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <h2>车辆信息：</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="品牌">
              <a-input
                placeholder="请输入品牌"
                disabled
                v-decorator="['brand', { rules: [{ required: true, message: '请输入品牌' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车型配置">
              <a-input
                placeholder="请输入车型配置"
                disabled
                v-decorator="['carModel', { rules: [{ required: true, message: '请输入车型配置' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车架号VIN码">
              <a-input
                placeholder="请输入车架号VIN码"
                disabled
                v-decorator="['vin', { rules: [{ required: true, message: '请输入车架号VIN码' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="库位">
              <a-input
                placeholder="请输入库位"
                disabled
                v-decorator="['storeName', { rules: [{ required: true, message: '请输入库位' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>接收方信息：</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接收方姓名">
              <a-input
                placeholder="请输入接收方姓名"
                disabled
                v-decorator="['receiverName', { rules: [{ required: true, message: '请输入接收方姓名' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="接收方电话">
              <a-input
                placeholder="请输入接收方电话"
                disabled
                v-decorator="['receiverPhone', { rules: [{ required: true, message: '请输入接收方电话' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交付时间">
              <!-- <a-input
                placeholder="请输入交付时间"
                v-decorator="['deliverTime', { rules: [{ required: true, message: '请输入交付时间' }] }]"
              />-->
              <a-date-picker
                placeholder="请输入交付时间"
                style="width: 100%"
                :showTime="true"
                disabled
                format="YYYY-MM-DD HH:mm:ss"
                v-decorator="['deliverTime', { rules: [{ required: true, message: '请输入交付时间' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>交付方信息：</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交付方姓名">
              <a-input
                placeholder="请输入交付方姓名"
                disabled
                v-decorator="['name', { rules: [{ required: true, message: '请输入交付方姓名' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="交付方电话">
              <a-input
                placeholder="请输入交付方电话"
                disabled
                v-decorator="['phone', { rules: [{ required: true, message: '请输入交付方电话' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <h2>交付清单：</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="24">
            <a-checkbox-group @change="onChange" style="width: 100%;" v-model="shouxuList">
              <a-row>
                <a-col :span="6" v-for="(value,key) in shouxuList" :key="key">
                  <a-checkbox :value="value" disabled>{{ value }}</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="24">
            <a-checkbox-group @change="onChange2" style="width: 100%;" v-model="zhuangbeiList">
              <a-row>
                <a-col :span="6" v-for="(value,key) in zhuangbeiList" :key="key">
                  <a-checkbox :value="value" disabled>{{ value }}</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-col>
        </a-row>
        <a-row>
          <h2>车辆出库：</h2>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="出库时间">
              <!-- <a-input
                placeholder="请输入出库时间"
                v-decorator="['outStoreTime', { rules: [{ required: true, message: '请输入出库时间' }] }]"
              />-->
              <a-date-picker
                placeholder="请输入出库时间"
                style="width: 100%"
                :showTime="true"
                format="YYYY-MM-DD HH:mm:ss"
                :disabled="disabled"
                v-decorator="['outStoreTime', { rules: [{ required: true, message: '请输入出库时间' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="出库负责人">
              <a-input
                placeholder="请输入出库负责人"
                :disabled="disabled"
                v-decorator="['managerName', { rules: [{ required: true, message: '请输入出库负责人' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'OutStorageModel',
  data() {
    return {
      title: '交易信息',
      visible: false,
      model: {},
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/sale/cxmSaleCarInfo/comfirmOutStore',
        /* edit: '/cxm/cxmOrderManager/edit', */
        queryId: '/sale/cxmSaleDeliverInfo/queryById',
        queryVin: '/sale/cxmSaleCarInfo/queryStoreInfoByVin',
        getCheckList: '/sale/cxmSaleCarInfo/queryCarInfoByVin',
        staffId: '/sale/cxmSaleStaffInfo/queryById',
        listId: '/sale/cxmSaleBaseInfo/queryByIds'
      },
      showDing: false,
      showEnterpriseUscc: false,
      checkboxList: [],
      changeList: [],
      shouxuList: [],
      zhuangbeiList: [],
      disabled:null,
    }
  },
  created() {

  },
  methods: {
    changeDepositNotes(val) {
      if (val == '不可退') {
        this.showDing = true
      } else {
        this.showDing = false
      }
    },
    add() {
      const that = this;
      that.edit({})
    },
    edit(record) {
      if(record.outType == 1){
        this.disabled = null;
      }else if(record.outType == 2){
        this.disabled = "disabled";
      }
      if (record.deliverId) {
        getAction(this.url.queryId, { id: record.deliverId }).then((res) => {
          if (res.success) {
            console.log(res.result);
            this.$nextTick(() => {
              this.form.setFieldsValue({
                deliverTime: res.result.deliverTime
              })
            })
            getAction(this.url.staffId, { id: res.result.deliveryStaffId }).then((res) => {
              if (res.success) {
                console.log(res.result);
                this.$nextTick(() => {
                  this.form.setFieldsValue({
                    name: res.result.name,
                    phone: res.result.phone,
                  })
                })
              }
            })
          }
        })
      }
      if (record.vin) {
        getAction(this.url.queryVin, { vin: record.vin }).then((res) => {
          if (res.success) {
            console.log(res.result);
            this.$nextTick(() => {
              this.form.setFieldsValue({
                storeName: res.result.storeName,
                managerName: res.result.managerName
              })
            })
          }
        })
        getAction(this.url.getCheckList, { vin: record.vin }).then((res) => {
          console.log(res);
          if (res.success) {
            if (res.result.accessoriesId) this.shouxuList = res.result.accessoriesId.split(",")
            if (res.result.originalEquipmentId) this.zhuangbeiList = res.result.originalEquipmentId.split(",")
          }
          console.log(this.shouxuList, this.zhuangbeiList);
        })
      }


      console.log(record);
      this.form.resetFields()
      this.model = Object.assign({}, record)
      console.log(this.model);
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          brand: this.model.brand,
          carModel: this.model.carModel,
          vin: this.model.vin,

          receiverName: this.model.receiverName,
          receiverPhone: this.model.receiverPhone,
          deliverTime: this.model.deliverTime,
          name: this.model.name,
          phone: this.model.phone,
          outStoreTime: this.model.outStoreTime?moment(this.model.outStoreTime):null,
          managerName: this.model.managerName,

        })
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {

      const that = this
      // 触发表单验证

      this.form.validateFields((err, values) => {
        if (!err) {

          that.confirmLoading = true

          let httpurl = ''
          let method = ''
          httpurl += this.url.add
          method = 'post'
          /* let formData = Object.assign(this.model, values) */
          let formData = {};
          formData.vin = this.model.vin
          console.log(values.outStoreTime);

          formData.outStoreTime = moment(values.outStoreTime._d).format("YYYY-MM-DD HH:mm:ss")
          /*           formData.carStatus = 2;
                    formData.contentName = that.changeList.join(','); */
          //时间格式化

          httpAction(httpurl, formData, method)
            .then((res) => {
              console.log('触发表单验证');
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    onChange(checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.value);
    },
    onChange2(checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.value);
    },
  },
}
</script>

<style lang="less" scoped>
</style>